<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../bootstrap-3.3.7/css/bootstrap.css" crossorigin="anonymous">
    <link rel="stylesheet" href="../ajax/libs/bootstrap-fileinput/fileinput.css" crossorigin="anonymous">
    <link rel="stylesheet" href="../sks/bootstrap-image-show/bootstrap-image-show.css" crossorigin="anonymous">
    <link rel="stylesheet" href="../sks/bootstrap-image-show-modal/bootstrap-image-show-modal.css" crossorigin="anonymous">


    <script src="../js/jquery.js" ></script>
    <script src="../bootstrap-3.3.7/js/bootstrap.js" crossorigin="anonymous"></script>
    <script src="../ajax/libs/bootstrap-fileinput/fileinput.js" type="text/javascript"></script>
    <script src="../sks/bootstrap-image-show/bootstrap-image-show.js" crossorigin="anonymous"></script>
    <script src="../sks/bootstrap-image-show-modal/bootstrap-image-show-modal.js" crossorigin="anonymous"></script>
    <script src="../sks/js/sks-ui.js" crossorigin="anonymous"></script>
    <script src="../js/aliyun/aliyun-oss-sdk.js" crossorigin="anonymous"></script>
    <style>
        .test-img {
            width: 160px;
            height: 160px;
            margin-right: 10px;
        }
    </style>
</head>
<body class="white-bg">
<!--    <div class="wrapper wrapper-content animated fadeInRight ibox-content">-->
<div class="wrapper wrapper-content fadeInRight">

    <div class="form-horizontal m" >
        <div class="row">
            <button id="btn-destroy-testfileinput" class="btn btn-primary" data-loading-text="Loading..."
                    type="button"> 销毁testfileinput
            </button>
        </div>
        <h4 class="form-header h4">testfileinput</h4>
        <div class="row">
            <input id="testfileinput" name="file" type="file" multiple>

        </div>

    </div>

</div>


<script th:inline="javascript">



    var initialPreview=[]
    var initialPreviewConfig=[]

    var deleteDocmentUrl="/oss/deleteDocment"

    //获取默认图片列表
    $.ajaxEasy({
        url: "/oss/list",
        successCallBack: function (result) {
            console.log(result)

            $.each(result,function (k,v){
                initialPreview.push(v.url)
                let items = {};
                //删除文件的post地址
                items.url= deleteDocmentUrl
                //删除时使用的的参数
                items.extra={
                    wbDocmentId: v.wbDocmentId
                }
                items.caption=v.name?v.name:''
                items.key=v.wbDocmentId
                initialPreviewConfig.push(items)
            })

        }
    })

    stsUrl="/oss/stsToken";


    $("#testfileinput").fileinput({
        'theme': 'explorer-fas',
        uploadUrl: '/oss/stsToken',
        // uploadUrl: "#",
        // deleteUrl: "",
        // deleteExtraData: "",
        language: 'zh', //设置语言
        textEncoding : "UTF-8",//文本编码
        // allowedFileExtensions: ['jpg', 'png', 'gif'], //接收的文件后缀
        uploadAsync: true, //默认异步上传
        showUpload: true, //是否显示上传按钮
        showRemove : false, //不要显示，没有做相应的删除数据库处理
        showClose: false, //不要显示，没有做相应的删除数据库处理
        showBrowse: true, //　fileinput支持部分文件格式（如各种图片格式，txt，pdf等）的预览，点击缩略图的右上角按钮即可，这个就是控制是否显示这个按钮的。
        showPreview : true, //是否显示预览
        showCaption: true,//默认true，设置为false时将不显示下面那个类似于input[type=text]那样的显示框（然而这个显示框并不能直接编辑，它只是显示了文件名等信息）
        browseClass: "btn btn-primary", //按钮样式
        dropZoneEnabled: true,//是否显示拖拽区域
        // maxFileCount: 1, //表示允许同时上传的最大文件个数
        enctype: 'multipart/form-data',
        processDelay: 500,
        validateInitialCount:false,
        overwriteInitial: false,
        initialPreviewAsData: true,
        initialPreview: initialPreview,
        initialPreviewConfig: initialPreviewConfig,
        uploadCustom: function (ajaxOptions) {
            var xhr=undefined;
            console.log("ajaxOptions=",ajaxOptions)
            // ajaxOptions.data 为 new FromData() 创建的
            $.each(ajaxOptions.data.getAll("file"),function (index,file){
                // xhr=uploadToOss(file,self)
                console.log("aliyun",$.aliyun)
                xhr=$.aliyun.uploadToOss({
                    ajaxOptions: ajaxOptions,
                    file: file,
                    url: ajaxOptions.url,
                    fileuploaded: function (result,stsInfo){
                        console.log("aliyun.fileuploaded",result)
                        console.log("aliyun.stsInfo",stsInfo)


                        var wbDocmentId = stsInfo.wbDocmentId;
                    }
                })
            })

            // $("#"+fileinputId).fileinput('refresh', {
            //     language: 'en',
            //     initialPreviewAsData: true,
            //     initialPreview: "/img/profile.jpg"
            // });

            console.log("uploadCustom.xhr",xhr)

            return xhr
        }

        // 删除原图才会触发
    }).on('filepredelete', function(event, key, jqXHR, data) {

        //多个文件时删除弹出好几次
        // if(!confirm("确定删除原文件？删除后不可恢复")){
        //     console.log("filepredelete111")
        //     //return 不管 false 还是 true 都改变不了删除动作，只能 throw强制结束js的执行
        //     throw "删除取消"
        // }
    }).on('fileremoved', function (event, previewId, extra,b) {
        //在移除事件里取出所需数据，并执行相应的删除指令
        var info = $.sksCacheData.get(previewId);
        if(info&&info.wbDocmentId) {
            var wbDocmentId = info.wbDocmentId;
            console.log("fileremoved.event",event)
            console.log("fileremoved.previewId",previewId)
            console.log("fileremoved.extra",extra)
            console.log("fileremoved.wbDocmentId",wbDocmentId)

        }

    }).on('filepreremove', function (event, previewId, extra) {

        console.log("filepreremove.event",event)
        console.log("filepreremove.previewId",previewId)
        console.log("filepreremove.extra",extra)


        //在移除事件里取出所需数据，并执行相应的删除指令
        var info = $.sksCacheData.get(previewId);
        console.log("filepreremove.info",info)
        if(info&&info.wbDocmentId){
            //上传成功的才会有此信息,同时调用服务端删除接口
            var wbDocmentId=info.wbDocmentId;
            console.log("filepreremove.wbDocmentId",wbDocmentId)


            return $.ajaxEasy({
                url: deleteDocmentUrl,
                data: {
                    wbDocmentId: wbDocmentId
                },
                successCallBack: function(result) {
                }
            })

        }


    }).on("filebatchselected",function(event, files) {

        // var test=[];
        // test.push("aa")
        // test.push("aa")
        // test.push("aab")
        //
        // console.log("test=",test)
        //
        // var x = new String();
        //
        //
        // console.log("$.aliyunxhr",$.aliyunxhr)
        // let xhrobj =  $.aliyunxhr.init();
        // console.log("xhrobj",xhrobj)
        //
        // console.log("xhrobj.xhr",xhrobj)
        // console.log("xhrobj.upload",xhrobj.upload)
        // console.log("xhrobj.eventAction11",xhrobj.upload.eventAction)
        // xhrobj.upload.eventAction('progress')
        //上传成功后触发
    }).on("fileuploaded",function (event, data, previewId, index) {
        console.log("fileuploaded.event",event)
        console.log("fileuploaded.data",data)
        console.log("fileuploaded.previewId",previewId)

        let stsInfo = $.extend({},data.response);

        let wbDocment = {
            wbDocmentId: stsInfo.wbDocmentId,
            url: stsInfo.url
        };

        //上传成功,存放到缓存
        // 在fileinput中删除时才能根据id,调用服务端删除接口
        $.sksCacheData.set(previewId, wbDocment)


        // imageDatas

        //无效果,估计页面重新渲染过
        // let $previewId = $('#' + previewId);
        // $previewId.attr('data-docmentid', wbDocmentId);
        // var $btnDelete=$previewId.find(".kv-file-remove")
        // $btnDelete.attr('disabled', false);
    }).on('filesuccessremove', function (event, previewId, extra) {
        //在移除事件里取出所需数据，并执行相应的删除指令
        var wbDocmentId=$('#' + previewId).attr('wbDocmentId');
        console.log("filesuccessremove.previewId",previewId)
        console.log("filesuccessremove.wbDocmentId",wbDocmentId)
    }).on("filesuccessremove",function(event, id) {
        console.log("filesuccessremove.event",event)
        console.log("filesuccessremove.id",id)
    }).on("fileclear",function(event, data, msg){
        console.log("fileclear.event",event)
        console.log("fileclear.data",data)
        console.log("fileclear.msg",msg)
    });

    $('.test-img').bootstrapImageShowModal();
    // $('.test-img').bootstrapImageShowModal();


    $(function (){
        $("#btn-destroy-testfileinput").click(function(){
            $("#testfileinput").fileinput("destroy");
        });
    });


</script>

</body>
</html>